<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Form stylesheet test</title>
	<style type="text/css" media="screen">
		@import '/styles/reset.css';
		@import '/styles/forms.css';
		
		/* Typography settings */
		body {
			font-size: 16px;
			line-height: 1.5; 
			padding: 1.5em;
			width: 40em;
/*			background: url(/images/testing/vertical_24.gif);*/
		}
		
		h1 {
			font-size: 24px;
			line-height: 1;
			margin-bottom: 1em;
		}
		h2 {
			font-size: 20px;
			line-height: 1.2;
			margin: 1.2em 0 0;
		}
		
	</style>
	<!--[if lte IE 7]><link rel="stylesheet" href="/styles/forms_ie.css" type="text/css" media="screen" title="no title" charset="utf-8"><![endif]-->
</head>
<body>
	<h1>Case studies</h1>
	
	<h2>Login form</h2>
	<p>This is the basic of forms using &ldquo;tight&rdquo; layout.</p>
	<form class="tight" action="#" method="post">
		<div class="field">
			<label class="label" for="field-email">Email</label>
			<input id="field-email" class="text" type="text" name="email" value="test@test.com"> 
		</div>
		<div class="field">
			<label class="label" for="field-password">Password</label>
			<input id="field-password" class="password" type="password" name="password" value="password">
			<span class="hint">Have you <a href="#">forgotten your password</a>?</span> 
		</div>
		<div class="field">
			<label><input type="checkbox" name="remember" value=""> Remember me</label> 
		</div>
		<div class="field">
			<button>Log in</button>
			<a class="button" href="#">Check your password</a>
		</div>
	</form>
	
	
	<h2>Compact registration form</h2>
	<p>A slightly more complex examples using &ldquo;compact&rdquo; layout.</p>
	<form class="compact" action="#" method="post">
		<fieldset class="compact first">
			<legend></legend>
			<div class="field">
				<label class="label" for="field-first-name">First name</label>
				<input id="field-first-name" class="text" type="text" name="first-name" value="Anton"> 
			</div>
			<div class="field">
				<label class="label" for="field-last-name">Last name</label>
				<input id="field-last-name" class="text" type="text" name="last-name" value="Muraviev"> 
				<span class="hint">Also known as surname</span>
			</div>
			<div class="field">
				<label class="label" for="field-email-2">Email</label>
				<input id="field-email-2" class="text" type="text" name="email" value="test@test.com"> 
				<span class="hint">You need to provide a valid email address</span>
			</div>
			<div class="field">
				<label class="label" for="field-confirm-email">Confirm email</label>
				<input id="field-confirm-email" class="text" type="text" name="confirm-email" value=""> 
				<span class="hint">Confirm thy email address</span>
			</div>
		</fieldset>
		<fieldset class="compact">
			<legend></legend>
			<div class="field">
				<label class="label" for="field-password-2">Password</label>
				<input id="field-password-2" class="password" type="password" name="password" value="password"> 
			</div>
			<div class="field">
				<label class="label" for="field-confirm-password">Confirm password</label>
				<input id="field-confirm-password" class="password" type="password" name="confirm-password" value="password"> 
			</div>
		</fieldset>
		<fieldset>
			<legend></legend>
			<div class="field">
				<label class="label" for="field-avatar">Avatar</label>
				<input class="file" type="file" name="avatar" value="" id="field-avatar">
			</div>
		</fieldset>
		<fieldset>
			<legend></legend>
			<div class="field">
				<label class="label" for="field-images">Images</label>
				<ul class="files">
					<li>photo_1.jpg <button>x</button> <span class="status">uploaded</span></li>
					<li>photo_2.jpg <button>x</button> <span class="status">uploaded</span></li>
					<li>photo_3.jpg <span class="status">uploading&hellip;</span></li>
				</ul>
				<input class="file" type="file" name="avatar" value="" id="field-images"> <input type="submit" name="upload" value="Upload"> 
			</div>
		</fieldset>
		<div class="field">
			<button>Register &raquo;</button>
		</div>
	</form>
	
	<h2>Registration form</h2>
	<p>A slightly more complex examples, using other widgets and fieldsets to visually separate field groups.</p>
	<form action="#" method="post">
		<fieldset class="first">
			<legend></legend>
			<div class="field">
				<label class="label" for="field-interests">Interests</label>
				<select name="interests" id="field-interests" multiple size="5">
					<option value="option1">option1</option>
					<option value="option2">option2</option>
					<option value="option2">option2</option>
					<option value="option2">option2</option>
					<option value="option2">option2</option>
					<option value="option2">option2</option>
					<option value="option2">option2</option>
					<option value="option2">option2</option>
					<option value="option2">option2</option>
				</select>
			</div>
		</fieldset>
		<fieldset>
			<legend></legend>
			<div class="field">
				<label class="label" for="field-gender">Gender</label>
				<select name="gender" id="field-gender">
					<option value=""></option>
					<option value="male">Male</option>
					<option value="female">Female</option>
				</select> 
			</div>
			<div class="field">
				<label class="label" for="field-birth-date">Date of birth</label>
				<input class="text date-day" maxlength="2" id="field-birth-date" name="day" value="24"> /
				<select name="month" class="date-month">
					<option value="male">January</option>
					<option value="female">February</option>
				</select> /
				<input class="text date-year" maxlength="4" name="year" value="2009"> 
				<span class="error">The date is invalid</span>
			</div>
			<div class="field">
				<label class="label" for="field-about">About</label>
				<textarea id="field-about" name="about" cols="40" rows="5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
			</div>
		</fieldset>
		<div class="field">
			<button>Log in</button>
		</div>
	</form>
</body>
</html>